<!--
- File:    积分兑换记录.
-->
<template>
  <div class="Web_Box nb">
    <div class="DistributionOrder">
      <div class="ProList bg_f5f5f5">
        <ul
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="false"
          infinite-scroll-distance="0"
          infinite-scroll-immediate-check="false">
          <li v-for="order in orderList.data">
            <div class="tit"><span class="fl">订单号：{{order.order_info.order_sn}}</span>
              <span class="fr cr_f84e37">{{order.order_info.state_desc}}</span></div>
            <div style="margin-bottom: 10px;" class="giftbox f-cb" v-for="goods in order.order_info.extend_order_goods" @click="gotoOrderDetail(order)">
              <div class="Pic">
                <img :src="$config.imgsite + $config.goodsImgSrc + order.order_info.store_id + '/' + goods.goods_image + '_w150'" alt=""/>
              </div>
              <div class="Con" style="width:11.5rem;">
                <div class="">
                  <h2 class="">{{goods.goods_name}}
                    <!--&nbsp;&nbsp;<span v-for="attr in goods.goods_spec">{{attr.name}} </span>-->
                  </h2>
                  <!--<p class="Attributes slh mb10"></p>-->
                  <!--<p class="Attribute slh mb10"><span v-for="attr in goods.goods_spec">{{attr.name}} </span></p>-->
                </div>
                <div class="">
                  <span class="Prices" v-show="goods.gc_id != '1038'">￥{{goods.goods_price}}</span>
                  <span class="Prices" v-show="goods.gc_id == '1038'"><i class="iconfont icon-zengpin1"></i></span>
                  <span class="Num fr">×{{goods.goods_num}}</span>
                </div>
              </div>
            </div>
            <div class="Operation">
              <div class="Deductible">积分抵扣:{{order.order_info.integral_amount}}&nbsp;在线支付:￥{{order.order_info.pay_amount}}&nbsp;</div>
              <div class="Total tr" v-if="order.order_info.order_type == '1'">共{{countOrderGoodsNum(order)}}件商品&nbsp;&nbsp;合计:￥{{order.order_info.order_amount || 0}}</div>
              <div class="fr">
                <!--<span class="but1 fr ml20" v-show="type == 2">提醒发货 </span>-->
                <!--<span class="but1 cr_595757 fr ml20" v-show="!order.order_info.if_lock && order.order_info.order_state == $dictionary.orderStatus.payed && order.order_info.order_type != '2'" @click="addRefundMoney(order.order_info.order_id, order.order_info.extend_order_goods[0].goods_id)">申请退款 </span>-->
                <span class="but1 cr_45a73a fr ml20" v-show="order.order_info.order_state == $dictionary.orderStatus.unpay" @click="pay(order)">立即付款 </span>
                <span class="but1 cr_595757 fr ml20" v-show="order.order_info.order_state == $dictionary.orderStatus.unpay" @click="cancleOrder(order.order_info.order_id)">取消订单 </span>
                <span class="but1 cr_45a73a fr ml20" v-show="order.order_info.order_state == $dictionary.orderStatus.sended" @click="confirmReceived(order.order_info.order_id)">确认收货 </span>
                <span class="but1 cr_595757 fr ml20" v-show="order.order_info.order_state == $dictionary.orderStatus.sended" @click="gotoOrderExpress(order.order_info.order_id)">查看物流 </span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <loading-more :allLoaded="orderList.allLoaded" :show="orderList.data.length > 0"></loading-more>
    <empty-data :show="orderList.allLoaded && orderList.data.length <= 0"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import payPop from '../../components/payPop'

  export default{
    data() {
      return {
        orderList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    components: {},
    created() {
      this.getOrderList(this.orderList.page, this.orderList.pageSize)
    },
    methods: {
      countOrderGoodsNum(order) {
        let count = 0
        if (!order.order_info || !order.order_info.extend_order_goods) {
          return count
        }
        for (let i = 0; i < order.order_info.extend_order_goods.length; i++) {
          count += parseInt(order.order_info.extend_order_goods[i].goods_num)
        }
        return count
      },
      gotoOrderExpress(id) {
        this.$router.push({name: 'order-express', params: {id: id}})
      },
      gotoOrderDetail(order) {
        this.$router.push({name: 'order-integral-detail', params: {id: order.order_info.order_id}})
      },
      initOrderList() {
        this.orderList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      },
      cancleOrder(id) {
        this.$messageBox.confirm(`你确定要取消订单吗?`).then(action => {
          this.$request.cancleOrder(id).then(data => {
            this.$toast('取消订单成功')
            this.initOrderList()
            this.getOrderList(this.orderList.page, this.orderList.pageSize)
          }).catch(e => {
            this.$toast('取消订单失败：' + e.msg)
          })
        }).catch(() => {
        })
      },
      getOrderList(page, pageSize) {
        this.orderList.loading = true
        this.$request.getIntegralOrderList('0', page, pageSize).then(data => {
          if (data.length < this.orderList.pageSize) {
            this.orderList.allLoaded = true
          }
          this.orderList.data = [...this.orderList.data, ...data]
        }).finally(() => {
          this.orderList.requested = true
          this.orderList.loading = false
        })
      },
      loadMore() {
        if (this.orderList.loading || this.orderList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getOrderList(++this.orderList.page, this.orderList.pageSize)
        }, 500)
      },
      addRefundGoods(orderId, goodsId) {
        this.$router.push({name: 'refund-goods-add', params: {orderId: orderId, goodsId: goodsId}})
      },
      addRefundMoney(orderId, goodsId) {
        this.$router.push({name: 'refund-money-add', params: {orderId: orderId, goodsId: goodsId}})
      },
      confirmReceived(id) {
        this.$request.confirmReceived(id).then(data => {
          this.$toast('确认收货成功')
          for (let i = 0; i < this.orderList.data.length; i++) {
            if (this.orderList.data[i].order_info.order_id == id) {
              this.orderList.data.splice(i, 1)
              break
            }
          }
        }).catch(e => {
          this.$toast('确认收货失败：' + e.msg)
        })
      },
      pay(order) {
        let paySn = order.order_info.pay_sn
        payPop({paySn: paySn, orderId: order.order_info.order_id})
      }
    }
  }
</script>

<style>

</style>